<div data-id="contenidoUsuario" class="container contUser">
	<h1 class="tituloMis">Mis Libros</h1>
	<p id="añadirMsgLibros"></p>
	<div class="tabbable" id="ocultaLibros">
		<ul class="nav nav-tabs estilosPestanas">
			<li class="active">
				<a href="#lib1" data-toggle="tab">Todas</a>
			</li>
			<li>
				<a href="#lib2" data-toggle="tab">Pendientes</a>
			</li>
			<li>
				<a href="#lib3" data-toggle="tab">Siguiendo</a>
			</li>
			<li>
				<a href="#lib4" data-toggle="tab">Finalizadas</a>
			</li>
		</ul>
		<div class="tab-content">
			
			<div class="tab-pane active" id="lib1">
				<p data-bind="visible: getLibros(getListaUsuario()).length == 0">No hay libros seleccionadas</p>
				<table class="table table-striped table-bordered tablaUsu3" id="tablaLibros1" data-id="tablaUsuario" data-bind="visible: getLibros(getListaUsuario()).length > 0">
					<p data-bind="visible: getLibros(getListaUsuario()).length > 0">Hay en tu colección <span data-bind="text: getLibros(getListaUsuario()).length"></span> libros, has finalizado <span data-bind="text:cuantasHay('libro','Finalizado')" ></span>, 
						estas siguiendo <span data-bind="text:cuantasHay('libro','Siguiendo')" ></span> y tienes pendientes <span data-bind="text:cuantasHay('libro','Pendiente')" ></span></p>
					<thead class="cabeceraUsu">
						<th class="not"> Título</th>
						<th> Género </th>
						<th> Año </th>
						<th> Estado </th>

					</thead>
					<tbody class="cuerpoUsu" data-bind="foreach: getListaUsuario()">
						<!-- ko if:categoria == 'libro' -->
						<tr data-bind="attr: {id: idItem}">
							<td class="not"><a data-bind="attr: {href: '#/plantilla?id='+idItem}"><span data-bind="text: titulo"> </span></a></td>
							<td><span data-bind="text: genero"> </span></td>
							<td><span data-bind="text: anio"> </span></td>
							<td>
							<div class="btn-group">
								<a class="btn dropdown-toggle" data-toggle="dropdown" title="estado" href="#"><i class="icon-eye-open"></i></a>
								<ul class="dropdown-menu">
									<li class="separacion3">
										<a class="vista2" value="Finalizado" data-bind="click: function(){actualizarEstado('Finalizado')}">Finalizado</a>
									</li>
									<li class="separacion3">
										<a class="vista2" value="Siguiendo" data-bind="click: function(){actualizarEstado('Siguiendo')}">Siguiendo</a>
									</li>
									<li class="separacion3">
										<a class="vista2" value="Pendiente" data-bind="click: function(){actualizarEstado('Pendiente')}">Pendiente</a>
									</li>
								</ul>
							</div> &nbsp;&nbsp;&nbsp;&nbsp; <span data-bind="text: estado2"> </span></td>
						</tr>
						<!-- /ko -->
					</tbody>
				</table>
			</div>

			<div class="tab-pane" id="lib2">
				<p data-bind="visible: cuantasHay('libro','Pendiente') == 0">No hay libros pendientes</p>
				<table class="table table-striped table-bordered tablaUsu3" data-id="tablaUsuario" data-bind="visible: cuantasHay('libro','Pendiente') > 0">
					<p data-bind="visible: cuantasHay('libro','Pendiente') > 0">Tienes pendientes <span data-bind="text:cuantasHay('libro','Pendiente')" ></span> libros</p>
					<thead class="cabeceraUsu">
						<th class="not"> Título</th>
						<th> Género </th>
						<th> Año </th>
						<th> Estado </th>

					</thead>
					<tbody class="cuerpoUsu" data-bind="foreach: getListaUsuario()">
						<!-- ko if:categoria == 'libro' && estado2() == 'Pendiente'-->
						<tr data-bind="attr: {id: idItem}">
							<td class="not"><a data-bind="attr: {href: '#/plantilla?id='+idItem}"><span data-bind="text: titulo"> </span></a></td>
							<td><span data-bind="text: genero"> </span></td>
							<td><span data-bind="text: anio"> </span></td>
							<td>
							<div class="btn-group">
								<a class="btn dropdown-toggle" data-toggle="dropdown" title="estado" href="#"><i class="icon-eye-open"></i></a>
								<ul class="dropdown-menu">
									<li class="separacion3">
										<a class="vista2" value="Finalizado" data-bind="click: function(){actualizarEstado('Finalizado')}">Finalizado</a>
									</li>
									<li class="separacion3">
										<a class="vista2" value="Siguiendo" data-bind="click: function(){actualizarEstado('Siguiendo')}">Siguiendo</a>
									</li>
									<li class="separacion3">
										<a class="vista2" value="Pendiente" data-bind="click: function(){actualizarEstado('Pendiente')}">Pendiente</a>
									</li>
								</ul>
							</div> &nbsp;&nbsp;&nbsp;&nbsp; <span data-bind="text: estado2"> </span></td>
						</tr>
						<!-- /ko -->
					</tbody>
				</table>
			</div>

			<div class="tab-pane" id="lib3">
				<p data-bind="visible: cuantasHay('libro','Siguiendo') == 0"> No hay libros siguiendo</p>
				<table class="table table-striped table-bordered tablaUsu3" data-id="tablaUsuario" data-bind="visible: cuantasHay('libro','Siguiendo') > 0">
					<p data-bind="visible: cuantasHay('libro','Siguiendo') > 0">Estas siguiendo <span data-bind="text:cuantasHay('libro','Siguiendo')" ></span> libros</p>
					<thead class="cabeceraUsu">
						<th class="not"> Título</th>
						<th> Género </th>
						<th> Año </th>
						<th> Estado </th>

					</thead>
					<tbody class="cuerpoUsu" data-bind="foreach: getListaUsuario()">
						<!-- ko if:categoria == 'libro' && estado2() == 'Siguiendo'-->
						<tr data-bind="attr: {id: idItem}">
							<td class="not"><a data-bind="attr: {href: '#/plantilla?id='+idItem}"><span data-bind="text: titulo"> </span></a></td>
							<td><span data-bind="text: genero"> </span></td>
							<td><span data-bind="text: anio"> </span></td>
							<td>
							<div class="btn-group">
								<a class="btn dropdown-toggle" data-toggle="dropdown" title="estado" href="#"><i class="icon-eye-open"></i></a>
								<ul class="dropdown-menu">
									<li class="separacion3">
										<a class="vista2" value="Finalizado" data-bind="click: function(){actualizarEstado('Finalizado')}">Finalizado</a>
									</li>
									<li class="separacion3">
										<a class="vista2" value="Siguiendo" data-bind="click: function(){actualizarEstado('Siguiendo')}">Siguiendo</a>
									</li>
									<li class="separacion3">
										<a class="vista2" value="Pendiente" data-bind="click: function(){actualizarEstado('Pendiente')}">Pendiente</a>
									</li>
								</ul>
							</div> &nbsp;&nbsp;&nbsp;&nbsp; <span data-bind="text: estado2"> </span></td>
						</tr>
						<!-- /ko -->
					</tbody>
				</table>
			</div>

			<div class="tab-pane" id="lib4">
				<p data-bind="visible: cuantasHay('libro','Finalizado') == 0">No hay libros finalizados</p>
				<table class="table table-striped table-bordered tablaUsu3" data-id="tablaUsuario" data-bind="visible: cuantasHay('libro','Finalizado') > 0">
					<p data-bind="visible: cuantasHay('libro','Finalizado') > 0">Has finalizado <span data-bind="text:cuantasHay('libro','Finalizado')" ></span> libros</p>
					<thead class="cabeceraUsu">
						<th class="not"> Título</th>
						<th> Género </th>
						<th> Año </th>
						<th> Estado </th>

					</thead>
					<tbody class="cuerpoUsu" data-bind="foreach: getListaUsuario()">
						<!-- ko if:categoria == 'libro' && estado2() == 'Finalizado'-->
						<tr data-bind="attr: {id: idItem}">
							<td class="not"><a data-bind="attr: {href: '#/plantilla?id='+idItem}"><span data-bind="text: titulo"> </span></a></td>
							<td><span data-bind="text: genero"> </span></td>
							<td><span data-bind="text: anio"> </span></td>
							<td>
							<div class="btn-group">
								<a class="btn dropdown-toggle" data-toggle="dropdown" title="estado" href="#"><i class="icon-eye-open"></i></a>
								<ul class="dropdown-menu">
									<li class="separacion3">
										<a class="vista2" value="Finalizado" data-bind="click: function(){actualizarEstado('Finalizado')}">Finalizado</a>
									</li>
									<li class="separacion3">
										<a class="vista2" value="Siguiendo" data-bind="click: function(){actualizarEstado('Siguiendo')}">Siguiendo</a>
									</li>
									<li class="separacion3">
										<a class="vista2" value="Pendiente" data-bind="click: function(){actualizarEstado('Pendiente')}">Pendiente</a>
									</li>
								</ul>
							</div> &nbsp;&nbsp;&nbsp;&nbsp; <span data-bind="text: estado2"> </span></td>
						</tr>
						<!-- /ko -->
					</tbody>
				</table>
			</div>
		</div>

	</div>
</div>